import React, { useState, useEffect } from 'react';
import { Input } from 'sui';

const PanelFind = ({ children, left, right, className, cl="gray", hcmd, width="w-64" }) => {
    const [filter, setFilter] = useState("");

    useEffect(() => {
        setFilter("");
    }, []);

    const hfind = (v) => {
        setFilter(v);

        if (hcmd) {
            hcmd(v);
        }
    };

    const getFilter = () => {
        if (hcmd) {
            return (
                <div className="mr-4">
                    <Input value={filter} label="在结果中搜索" mg="dense" setValue={v => hfind(v.trim())} width={width}/>
                </div>
            );
        }

        return null;
    };

    return (
        <div className={`bg-${cl}-200`}>
            <div className="text-base flex justify-between py-1 items-center">
                <div className={ "inline-flex px-4 items-center " + className }>
                    {left}
                </div>
                <div className="inline-flex px-4 items-center">
                    {getFilter()}
                    {right}
                </div>
            </div>
            <div className="ml-4">
                {children}
            </div>
        </div>
    );
};

export {PanelFind};
